<template>
	<div>
		<div style="position: relative;">
			<div class="printbtn">
				<!-- <span @click="closeFunction">关闭</span> -->
				<span @click="printFun">成绩单打印</span>
				<!-- <span style="color:#f00;">（为了打印文件的整洁请先调整为1920的分辨率再使用打印）</span> -->
			</div>
			<div id="pdfWrap" style="width: 792px;margin: 30px auto;">
				<div class="body">
					<div class="header">
						<img src="../../assets/home/logo.png" />
						<div>
							第二课堂成绩单
							<!-- <span>TRANSCRIPT OF THE SECOND CLASS</span> -->
						</div>
					</div>
					<div class="mainbody">
						<h2>基础信息</h2>
						<div class="basics flex">
							<div class="id-photo">
								<img src="../../assets/home/zanwu.png" />
							</div>
							<div class="id-info">
								<div>姓名：{{ myinfo.Name }}</div>
								<div>性别：{{ myinfo.Sex=='1'?'男':myinfo.Sex=='2'?'女':"" }}</div>
								<!-- <div>成绩单编号：{{ myinfo.Name }}</div> -->
								<div>班级：{{ myinfo.ClassName }}</div>
							</div>
							<div class="id-info" style="margin-left: 80px;">
								<div>学号：{{ myinfo.UserNo }}</div>
								<div>学院： {{ myinfo.DepartName }}</div>
								<div>年级：{{ myinfo.Grade }}</div>

							</div>
						</div>
						<div class="img-text flex">
							<div class="flex-1">
								<h2>能力模型</h2>
								<div ref="chart1" style="height: 250px;"></div>
							</div>
							<div class="flex-1">
								<h2>学期积分曲线图</h2>
								<div style="text-align: right;margin-right: 36px;">单位：分数</div>
								<div ref="chart2" style="height: 270px;"></div>
							</div>
						</div>

					</div>
				</div>
				<div class="body1">
					<div class="mainbody" style="position:relative">
						<h2>学年学期详情</h2>
						<div class="tabWork">
							<div class="boxmaina-title flex">
								<div style="color:#000;width:20%;">学年学期</div>
								<div style="color:#000;width:20%;">课程大类</div>
								<div style="color:#000;width:31%;">课程名称</div>
								<div style="color:#000;width:14%;">课程分数</div>
								<div style="color:#000;width:15%;">小计</div>
							</div>
							<div class="box-tha">
								<div class="boxmain-content flex" v-for="(item,index) in tableData">
									<div class="center-align" style="width:20%;">
										{{item.sxueqi}}
									</div>
									<div style="width: 80%;">
										<div v-for="(list, d) in item.kc" :key="d" class="flex">
											<div class="box-border" style="color:#000;width:20%;display: flex;align-items: center;justify-content: center;">
												{{ list.name }}
											</div>
											<div style="width: 60%;">
												<div class="cell flex" v-for="(sublist, d) in list.kclei" :key="d"
													>
													<div class="box-border" style="width:65%;">
														{{ sublist.name }}
													</div>
													<div class="box-border" style="width:35%;">{{ sublist.value }}</div>
												</div>
											</div>
											<div style="display: flex;align-items: center;justify-content: center;box-sizing: border-box;padding-left: 10px;">{{ list.score }}</div>
											
											<!-- <div class="nothing1"
												v-if="list.Child.filter(arr => arr.SumScore != 0).length == 0">
												暂无数据
											</div> -->
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="body">
					<div class="mainbody" style="margin-top: 0;">
						<h2>工作履历</h2>
						<div class="tabWork">
							<div class="boxmaina-title flex">
								<div style="color:#000;width:40%;">学期</div>
								<div style="color:#000;width:45%;">职务全称</div>
								<div style="color:#000;width:15%;">分值</div>
							</div>
							<div class="box-tha">
								<div class="boxmain-content flex" v-for="(item, i) in UserPostList" :key="i">
									<div style="width:40%;">{{ item.SemesterName }}</div>
									<div style="width:45%;">{{ item.Title }}</div>
									<div style="width:15%;">{{ item.Score }}</div>
								</div>
								<div class="nothing" v-if="UserPostList.length == 0"></div>
							</div>
						</div>
					</div>
					<div class="mainbody" style="margin-top:15px;position:relative">
						<h2>获奖记录 <span @click="seeList('UserPrize')">更多&nbsp;&nbsp;</span></h2>
						<div class="tabWork">
							<div class="boxmaina-title flex">
								<div style="color:#000;width:45%;">活动名称</div>
								<div style="color:#000;width:40%;">奖项</div>
								<div style="color:#000;width:15%;">积分</div>
							</div>
							<div class="box-tha">
								<div class="boxmain-content flex" v-for="(item, i) in prizesList.filter((m,n) => n<2)"
									:key="i">
									<div style="width:45%;">{{ item.ActivityTitle }}</div>
									<div style="width:65%;">
										{{ item.ActivityTypePrizeTitle }}{{ item.PrizeTitle?' | '+item.PrizeTitle:'' }}
									</div>
									<div style="width:35%;">{{ item.PrizeScore }}</div>
								</div>
								<div class="nothing" v-if="prizesList.length == 0"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>
</template>

<script>
	import moment from 'moment';
	import html2Canvas from 'html2canvas';
	import JSPDF from 'jspdf';
	import Cache from '@/utils/cache';
	import {
		UserDoGetScoreList,
		UserCenterDoGetSumScoreList,
		UserGetActivityTypeListByParentIDCommon,
		GetPrizePageListCenter,
		UserCenterDoGetUserPostList,
		UserCenterDoGetActivityTypeScoreRateList,
		UserCenterDoGetSemesterScoreList
	} from '@/api/follow';
	export default {
		props: {

		},
		data() {
			return {
				scoreList: [{
					Name: ''
				}, {
					Name: ''
				}, {
					Name: ''
				}, {
					Name: ''
				}],
				ActivityTypeList: [],
				listone: [],
				myinfo: Cache.get('myInfo'),
				ActivityTypeListByParentID: [],
				UserPostList: [],
				prizesList: [],
				tableData:[
					{
						sxueqi:'学期',
						kc:[{
							name:'思政学习',
							kclei:[
								{
									name:'青马班、团课等培训',
									value:'0.2'
								},
								{
									name:'青马班、团课等培训',
									value:'0.2'
								},
								{
									name:'青马班、团课等培训',
									value:'0.2'
								},
								{
									name:'青马班、团课等培训',
									value:'0.2'
								}
							],
							score:'12.20'
						}]
					}
				]
			};
		},
		computed: {
			totalScore() {
				return this.$store.state.score;
			}
		},
		mounted() {


			
			this.GetEcharts()
		},
		methods: {
			moment,
			closeFunction(data) {
				this.$emit('closeFun', data);
			},
			async GetEcharts() {
				let data = {};
				let res = await UserCenterDoGetActivityTypeScoreRateList(data);
				let echartData = res.data.data;
				let arrechart = []
				for (let i = 0; i < echartData.length; i++) {
					arrechart.push({
						value: echartData[i].Rate,
						name: echartData[i].ActivityTypeName,
					})
				}
				this.getEchartData(arrechart)
				//积分曲线
				let res1 = await UserCenterDoGetSemesterScoreList(data);
				let arrs=res1.data.data
				let arr1=[]
				let arr2=[]
				for (let i = 0; i < arrs.length; i++) {
					arr1.push(arrs[i].Score)
					arr2.push(arrs[i].SemesterTime)
				}
				this.getEchartData1(arr1,arr2)
				console.log(res1.data.data);
			},
			getEchartData(arrechart) {
				const chart = this.$refs.chart1
				if (chart) {
					const myChart = this.$echarts.init(chart)
					const option = {
						tooltip: {
							trigger: 'item',
							formatter: (item) => {
								let txtCon = `${item.data.name}</br><b>${item.percent}%<b>`;
								return txtCon
							},
						},
						legend: {
							bottom: 10,
							left: 'center',
						},
						color: ['#FECA57', '#26B30B', '#FE5578', '#6D12E0', '#3F81FF', '#FF7425', '#57D0FE',
							'#DB3DC0'],
						series: [{
							type: 'pie',
							radius: '50%',
							data: arrechart,
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}]
					};
					myChart.setOption(option)
					window.addEventListener("resize", function() {
						myChart.resize()
					})
				}
				this.$on('hook:destroyed', () => {
					window.removeEventListener("resize", function() {
						myChart.resize();
					});
				})
			},
			getEchartData1(arr1,arr2) {
				const chart = this.$refs.chart2
				if (chart) {
					const myChart = this.$echarts.init(chart)
					const option = {
						xAxis: {
							type: 'category',
							boundaryGap: false,
							data: arr2,
							 // axisLabel: {
							 //        //x轴文字的配置
							 //        show: true,
							 //        //使x轴文字显示全
							 //        interval: 0,
							 //        //倾斜角度
							 //        rotate : 15,
							 //    },
								axisLabel: {  
								    interval: 0,  
								    formatter:function(value){ 
								        return value.split("|").join("\n");  
								    }  
								} 

						},
						yAxis: {
							type: 'value',
							axisLine: {
								show: false, //隐藏y轴
							},
						},
						series: [{
							data:arr1,
							type: 'line',
							itemStyle: {
								normal: {
									areaStyle: {
										type: 'default'
									},
									color: '#3F81FF'
								}
							},
							areaStyle: {}
						}]
					};
					myChart.setOption(option)
					window.addEventListener("resize", function() {
						myChart.resize()
					})
				}
				this.$on('hook:destroyed', () => {
					window.removeEventListener("resize", function() {
						myChart.resize();
					});
				})
			},
			//获取表格数据
			async GetSumScoreList() {
				let list = this.ActivityTypeListByParentID
				for (let i = 0, len = list.length; i < len; i++) {
					let data = {};
					data.activityTypeID = list[i].ID;
					let res1 = await UserCenterDoGetSumScoreList(data);
					list[i] = {
						...list[i],
						data: res1.data.data,
						totalScore: res1.data.total
					};
				}
				this.scoreList = list;
			},
			async getList() {
				let data = {};
				let res = await GetPrizePageListCenter(data);
				this.prizesList = res.data.data;
			},
			seeList(name) {
				this.$router.push({
					name: name
				});
			},
			printFun() {
				let ele = document.querySelector('#pdfWrap')
				let eleW = ele.offsetWidth; // 获得该容器的宽
				let eleH = ele.offsetHeight; // 获得该容器的高
				let eleOffsetTop = ele.offsetTop; // 获得该容器到文档顶部的距离
				let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离

				var canvas = document.createElement("canvas");
				var abs = 0;

				let win_in = document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）
				let win_out = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）

				if (win_out > win_in) {
					// abs = (win_o - win_i)/2;    // 获得滚动条长度的一半
					abs = (win_out - win_in) / 2; // 获得滚动条宽度的一半
					// console.log(a, '新abs');
				}
				canvas.width = eleW * 2; // 将画布宽&&高放大两倍
				canvas.height = eleH * 2;

				var context = canvas.getContext("2d");
				context.scale(2, 2);
				context.translate(-eleOffsetLeft - abs, -eleOffsetTop);

				html2Canvas(ele, {
					dpi: 300,
					allowTaint: true,
					// allowTaint: true,  //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
					useCORS: true //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
				}).then((canvas) => {
					var contentWidth = canvas.width;
					var contentHeight = canvas.height;
					//一页pdf显示html页面生成的canvas高度;
					var pageHeight = contentWidth / 780.28 * 841.89;
					//未生成pdf的html页面高度
					var leftHeight = contentHeight;
					//页面偏移
					var position = 0;
					//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
					// var imgWidth = 783;
					// var imgHeight = 782.5 / contentWidth * contentHeight;
					var imgWidth = 595;
					var imgHeight = 594.5 / contentWidth * contentHeight;

					var pageData = canvas.toDataURL('image/jpeg', 1.0);
					// let pageData = new Image();

					var pdf = new JSPDF('', 'pt', 'a4');
					//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
					//当内容未超过pdf一页显示的范围，无需分页
					if (leftHeight < pageHeight) {
						//在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
						pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
						// pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
					} else { // 分页
						while (leftHeight > 0) {
							pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
							leftHeight -= pageHeight;
							position -= 841.89;
							//避免添加空白页
							if (leftHeight > 0) {
								pdf.addPage();
							}
						}
					}
					//可动态生成
					pdf.save(`${this.myinfo.Name}${this.myinfo.UserNo}` + '.pdf');
				})

			},

		}
	};
</script>

<style lang="less" scoped>
	.printbtn {
		position: absolute;
		top: 0px;
		right: 50px;
		// width: 140px;

		z-index: 999;

		span {
			display: inline-block;
			height: 34px;
			line-height: 34px;
			text-align: center;
			float: right;
			color: #4577eb;
			background: #fff;
			box-shadow: 0px 10px 22px rgba(0, 0, 0, 0.06);
			border: none;
			padding: 0 10px;
			border-radius: 10px;
			font-size: 12px;
			cursor: pointer;
			margin-left: 10px;
		}
	}

	.nothing {
		height: 62px;
		line-height: 100px;
		text-align: center;
		background: url(../../assets/nothing.png) center center no-repeat;
		color: #999 !important;
		background-size: 40px 40px;
		font-size: 14px;
	}

	.flex {
		display: flex;
	}

	.flex-1 {
		flex: 1;
	}

	.box-th {
		height: 40px;
		line-height: 40px;

		.boxmain {
			overflow: hidden;
			text-align: center;
			font-weight: bold;

			.con {
				width: 60px;
			}
		}
	}

	.box-tr {
		border-top: 1px solid #fff;
		text-align: center;
		min-height: 40px;

		.boxLeft {
			width: 100px;
			display: -moz-box;
			-moz-box-pack: center;
			-moz-box-align: center;

			/* Safari、Opera 以及 Chrome */
			display: -webkit-box;
			-webkit-box-pack: center;
			-webkit-box-align: center;

			/* W3C */
			display: flex;
			box-pack: center;
			box-align: center;
		}

		.box-Right {
			overflow: hidden;
			line-height: 40px;
		}

		.cell {
			width: 50%;
			float: left;
			border-bottom: 1px solid #fff;
			font-size: 14px;

			.cellcon {
				width: 60px;
			}
		}
	}

	body,
	html,
	p {
		margin: 0;
		padding: 0px;
	}

	.body1 {
		background-image: url(../../assets/home/cjd-bg.png);
		background-color: #fff;
		background-size: 772px 1143px;
		background-position: 10px 10px;
		width: 792px;
		padding: 45px 20px;
		background-repeat: no-repeat;

		.boxmain-content>div>.flex {

			&:last-child {

				.box-border,
				.nothing1 {
					border-bottom: 0;
				}
			}
		}

		.mainbody {
			h2 {
				font-size: 18px;
				font-weight: bold;
				color: #000;
				margin: 15px 0;

				span {
					font-size: 14px;
					float: right;
					font-weight: normal;
				}
			}

			.boxmaina-title {
				line-height: 50px;
				color: #000;
				font-weight: bold;
				font-size: 17px;
				background: rgb(233, 241, 255);
				padding-left: 10px;
			}

			.box-tha {
				border-left: 1px solid #eee;
				border-right: 1px solid #eee;
				border-bottom: 1px solid #eee;
			}

			.boxmain-content {
				border: 0;

				.center-align {
					position: relative;
					top: 0;
					bottom: 0;
					margin: auto;
					font-size: 14px;
					color: #000;
					text-align: center;
					line-height: 1.6;

					div {
						color: #0048D2;
					}
				}

				.nothing1 {
					padding: 5px 8px;
					border-bottom: 1px solid #eee;
					width: 55%;

				}

				.flex {
					line-height: 35px;

					.box-border {
						padding: 5px 8px;
						border-left: 1px solid #eee;
						border-right: 1px solid #eee;
						border-bottom: 1px solid #eee;

						&:last-child {
							border-bottom: 0;
						}
					}
				}

			}
		}
	}

	.body {
		background-image: url(../../assets/home/cjd-bg.png);
		background-color: #fff;
		background-size: 772px 1102px;
		background-repeat: no-repeat;
		background-position: 10px 10px;
		width: 792px;
		height: 1122px;
		padding: 45px 20px;

		.mainbody {
			padding-left: 10px;
			padding-right: 10px;
			margin-top: 50px;

			h2 {
				font-size: 18px;
				font-weight: bold;
				color: #000;
				margin: 35px 0 25px 0;

				span {
					font-size: 14px;
					float: right;
					font-weight: normal;
				}
			}

			.basics {
				padding: 20px;

				.id-photo {
					width: 106px;
					height: 150px;
					overflow: hidden;
					margin-right: 35px;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.id-info {
					font-weight: bold;
					font-size: 17px;
					color: #000;
					line-height: 2.25;

					div {}

				}
			}

			.evaluate {
				font-weight: bold;
				font-size: 17px;
				color: #000;
				line-height: 2.4;
				margin-left: 15px;

				img {
					margin-left: 15px;
				}
			}

			.post {
				text-align: right;
				font-weight: bold;
				font-size: 18px;
				margin-top: 47px;
				color: #000;
			}

			.nothing {
				border: 1px solid #eee;
				padding: 15px;
			}

			.boxmaina-title {
				line-height: 50px;
				color: #000;
				font-weight: bold;
				font-size: 17px;
				background: rgb(233, 241, 255);
				padding-left: 10px;
			}

			.boxmain-content {
				border: 1px solid #eee;
				line-height: 50px;
				font-size: 15px;
			}
		}
	}

	.header {
		height: 40px;
		text-align: center;
		position: relative;

		img {
			height: 25px;
			position: absolute;
			top: 5px;
			left: 28px;
		}

		div {
			font-size: 22px;
			color: #000;
			font-weight: bold;

			span {
				display: block;
				font-size: 12px;
				color: #A38E86;
				font-weight: normal;
			}
		}
	}
</style>
